<!-- <template>
	
	<view style="width: 750rpx;overflow: hidden;" class="">
		<view class="dyy-barrage">
			
		</view>
	</view>
</template> -->
<template>
    <view style="width: 750rpx; height: 300rpx; overflow: hidden;">
        <view class="dyy-barrage" style="position: relative; height: 100%;">
            <!-- 原有block结构 -->
			<block v-for="(item,index) in items" :key="index">
				<view class="aon" :style="{top: `${item.top}%`}">
					<view class="image">
						<image :src="item.headimg"></image>
					</view>
					<view class="name">{{(item.content)}}</view>
					<!-- 、<view class="name">{{(item.text.userName).charAt(0)+'**'+'秒杀成功'}}</view> -->
				</view>
			</block>
        </view>
    </view>
</template>

<script>
	import * as api from '@/request/app.js'; // 引入api 方法
	let cycle;
	export default {
		name: 'barrage',
		data() {
			return {
				items: [], //弹幕列表
				list: [ //模拟数据

				],
			}
		},
		mounted() {

			this.giftHeadImg()
		},
		methods: {
			async giftHeadImg() {
				const {
					code,
					data
				} = await api.giftHeadImg()
				if (code == 0) {
					this.begin(data)
				}
			},
			addd(text = '', flag) {
				if (flag == 'odd') {
					this.items.push({
						...text,
						top: 5,
					});
				} else {
					this.items.push({
						...text,
						top: 30,
					});
				}
			},
			begin(items = []) {
				this.items = [];
				cycle && (clearInterval(cycle));
				let i = 0,
					len = items.length;
				for (let i = 0; i < 5; i++) { //循环遍历五次，防止数据太少停止滚动
					items = items.concat(items)
				}
				cycle = setInterval(() => {
					if (i < items.length) {

						if (i % 2 === 1) { //奇数个
							let flag = 'odd'
							this.addd(items[i], flag);
						} else { //偶数个
							let flag = 'even'
							this.addd(items[i], flag);
						}
						i++;
					}
				}, 1400) //时间越短 弹幕距离越近
			},
		}

	}
</script>

<style lang="scss">
	.dyy-barrage {
	    position: relative;
	    height: 100%;
	    width: 100%;
	}
	
	// .aon {
	  
	// }

	.aon {
		/* 原有样式 */
		max-width: 500rpx;
		animation: mymove 8s linear forwards; /* 加快动画速度 */
		transform: translateX(0); /* 启用GPU加速 */
		background: rgba(0, 0, 0, .5);
		border-radius: 40rpx;
		position: absolute;
		padding: 5rpx 15rpx; //修改速率需要修改宽度和动画的时间以及定时器的时间
		white-space: nowrap;
		animation: mymove 14s linear forwards;
		animation-timing-function: linear;
		-webkit-animation-timing-function: linear;
		animation-fill-mode: forwards;
		display: flex;
		text-align: center;
		align-items: center;
		justify-content: center;

		// position: sticky;
		//   top: 96rpx;
		.image {
			margin-left: 10rpx;
			display: flex;
			align-items: center;

			image {
				width: 38rpx;
				height: 38rpx;
				border-radius: 50%;
			}
		}

		.name {
			margin-left: 20rpx;
			line-height: 44rpx;
			color: white;
			font-size: 26rpx;
		}
	}

	.l-barrage {
		z-index: -1;
		width: 100%;

		position: fixed;

	}


	@keyframes mymove {
		from {
			left: 100%;
		}

		to {
			left: -200%;
		}
	}

	@-moz-keyframes mymove

	/* Firefox */
		{
		from {
			left: 100%;
		}

		to {
			left: -200%;
		}
	}

	@-webkit-keyframes mymove

	/* Safari and Chrome */
		{
		from {
			left: 100%;
		}

		to {
			left: -200%;
		}
	}

	@-o-keyframes mymove

	/* Opera */
		{
		from {
			left: 100%;
		}

		to {
			left: -200%;
		}
	}
</style>